<template>
	<view class="app"> 
		<view class="order-list">
			<view class="order-card box-card" v-for="(item,index) in list" :key="index">
				<view class="box-card-header">
					<i class="iconfont icon-touxiang-mianxing-0" style="font-size: 60rpx;"></i>
					<text class="name-text">{{item.recyclerName}}</text>
					<text class="phone-text">手机 {{item.recyclerMobile}}</text>
				</view>
				<view class="box-card-info">
					<view class="box-card-info-item">
						<text class="info-item-data">{{item.orderToDaySum}}</text>
						<text class="info-item-title">今日订单金额</text>
					</view>
					<view class="box-card-info-item">
						<text class="info-item-data">{{item.orderSum}}</text>
						<text class="info-item-title">历史订单金额</text>
					</view>
					<view class="box-card-info-item">
						<text class="info-item-data">{{item.orderToDayNum}}</text>
						<text class="info-item-title">今日订单数量</text>
					</view>
					<view class="box-card-info-item">
						<text class="info-item-data">{{item.orderNum}}</text>
						<text class="info-item-title">历史订单数量</text>
					</view>
				</view>
			</view>
			<u-loadmore :status="loadMoreStatus" @loadmore="loadList"/>
			<c-safe-bottom ></c-safe-bottom>
			<view style="height: 100rpx;"></view>
		</view>
		<view class="recycler-site">
			
			<view class="recycler-site-row">
				<view class="recycler-site-item">
					<u-icon name="map" color="#fff" size="34"></u-icon>
					<text>{{nowSite.label}}</text> 
				</view>
				<view class="recycler-site-item" @click="showSiteSelect=true"> 
					<text>切换站点</text> 
					<u-select @confirm="changeSite" v-model="showSiteSelect" :list="siteList" value-name="siteId" label-name="siteName" :default-value="[default_value]"></u-select>
					<u-icon name="arrow-right" color="#fff" size="34"></u-icon>
				</view>
			</view>
			<c-safe-bottom ></c-safe-bottom>
		</view>
	</view>
</template>
<style scoped>  
	// #ifdef H5
	.safe-bottom{ height: 0rpx;}
	// #endif 
	.order-list{padding-top: 10rpx;}
	.order-btn-row{ display: flex;}
	.order-btn-right{flex:1;text-align: right;}
	.order-info-row{  display: flex; align-items: center;margin-bottom: 10rpx;}
	.order-info-row label{ flex-shrink: 0;}
	.order-info-row text{ flex:1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
	/deep/ .order-btn-right .u-btn{margin-left: 20rpx !important;}
	/deep/ .u-load-more-wrap{margin:20rpx !important;}
	.recycler-site{ font-size: 34rpx;background-color: #19be6b;color:white;position: fixed;bottom:0;padding:20rpx;width: 100%;z-index: 9999; }
	.recycler-site-row{display: flex;align-items: center; justify-content: space-between;}
	.recycler-site-item{display: flex;align-items: center;}
	/deep/  .uicon-map{margin-right: 20rpx;}
	.order-card{ display: block;padding-bottom: 40rpx;padding-top: 10rpx;}
	
	.box-card-header{position:relative;display: flex;align-items: center;}
	.name-text{font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 32rpx;color: #343434;text-align: left;font-style: normal;text-transform: none;}
	.phone-text{position:absolute;right:10rpx;font-size: 22rpx;}
	.box-card-info{margin-top:20rpx;display:contents;width: 100%;display: flex;}
	.box-card-info-item{width:25%;text-align: center;}
	.info-item-data,.info-item-title{display: block;}
	.info-item-data{font-size:36rpx;font-weight:bold;color:#333333;margin:5px 0;margin:10rpx 0;}
	.info-item-title{color:#A9A9A9;font-size:22rpx;font-family: PingFang SC, PingFang SC;}
</style>
<script>  
	export default {
		data() {
			return {
				loadMoreStatus:"loadmore",
				list:[],
				showSiteSelect:false,
				siteId:0,
				siteList:[],
				nowSite:{},
				default_value:0
			}
		}, 
		computed:{
			 
		},
		methods:{
			loadList(){
				this.$u.api.recycler.getRecyclerList({recyclerSiteId:this.siteId}).then(res => {
					if(res.status != 200){
						return false
					}
					this.list = {...res.data}
				})
			},
			changeSite(e){
				let nowSiteId = e[0].value
				this.siteId = nowSiteId
				this.loadList()
			},
			getSiteList(){
				this.$u.api.site.getSiteList({isAdmin:1}).then(res => {  
					if(res.status != 200){
						return false
					}
					this.siteList = []
					for(let index in res.data)
					{
						this.siteList.push({
							siteId:res.data[index].siteId,
							siteName:res.data[index].siteName
						})
						if(res.data[index].siteId == this.siteId){
							this.default_value = index
							this.siteId = res.data[index].siteId
							this.nowSite = {
								value:res.data[index].siteId,
								label:res.data[index].siteName,
							}
						}
					}
				})
			}
		},
		onLoad(option){
			this.siteId = option.siteId
			this.getSiteList()
			this.loadList()
		}, 
		onReady() { 

		},
		onUnload() { 
			
		}
		
	}
</script>